<template>
  <div class="app-container">
    <div class="top_box">
      <div class="box">
        <div class="title">
          <div class="left">
            <div class="tag"></div>
            住户基本数据
          </div>
          <div class="right" @click="GengXin">
            <img src="../../assets/images/cha (1).png" alt="">更新
          </div>
        </div>

        <div class="list">
          <div class="qiu" data-attr="瞬时流量">
            <WaterBall :proportion="ratio1">
              <div class="ballCenter">
                <span>{{ info1.velocityFlow?info1.velocityFlow:0 }}m³/h</span>
              </div>
            </WaterBall>
            <div class="name">瞬时流量</div>
          </div>
          <div class="qiu" data-attr="瞬时热量">
            <WaterBall :proportion="ratio2" lightColor="#19fcfa" deepColor="#00ff4d">
              <div class="ballCenter">
                <span>{{ info1.thermalPower?info1.thermalPower:0 }}kw</span>
              </div>
            </WaterBall>
            <div class="name">瞬时热量</div>
          </div>
          <div class="qiu" data-attr="供水温度">
            <WaterBall :proportion="ratio3" lightColor="#0d8bfc" deepColor="#00fcd4">
              <div class="ballCenter">
                <span>{{ info1.waterSupplyTemperature?info1.waterSupplyTemperature:0 }}℃</span>
              </div>
            </WaterBall>
            <div class="name">供水温度</div>
          </div>
          <div class="qiu" data-attr="回水温度">
            <WaterBall :proportion="ratio4" lightColor="#f2a20f" deepColor="#6008ec">
              <div class="ballCenter">
                <span>{{ info1.returnWaterTemperature?info1.returnWaterTemperature:0 }}℃</span>
              </div>
            </WaterBall>
            <div class="name">回水温度</div>
          </div>
          <div style="cursor: pointer;" @click="totalWorkTimeEchartShow" class="qiu" data-attr="累计流量">
            <WaterBall lightColor="#444F64" deepColor="#444F64">
              <div class="ballCenter">
                <span style="color: #fff;">{{ info1.totalFlow?info1.totalFlow:0  }}m³</span>
              </div>
            </WaterBall>
            <div class="name">累计流量</div>
          </div>
          <div style="cursor: pointer;" @click="totalFlowEchartShow" class="qiu" data-attr="累计热量">
            <WaterBall lightColor="#444F64" deepColor="#444F64">
              <div class="ballCenter">
                <span style="color: #fff;">{{ info1.currentHeatOrCold?info1.currentHeatOrCold:0  }}kWh</span>
              </div>
            </WaterBall>
            <div class="name">累计热量</div>
          </div>
        </div>
      </div>
      <div class="box2">
        <div class="btn_box">
          <div class="btn_right" @click="useTiaoKong">
            <img src="../../assets/images/cha (2).png" alt="">调控
          </div>
        </div>
        <div class="qiu" data-attr="阀门开度">
          <WaterBall :proportion="info2.valveOpen / 100">
            <div class="ballCenter">
              <span>{{ info2.valveOpen?info2.valveOpen:0 }}%</span>
            </div>
          </WaterBall>
          <div class="name">阀门开度</div>
        </div>
      </div>
      <div class="box2">
        <div class="btn_box">
          <div class="btn_right" @click="getTemperature(true)">
            <img src="../../assets/images/cha (1).png" alt="">更新
          </div>
        </div>
        <div class="qiu" data-attr="室温">
          <WaterBall :proportion="ratio5" lightColor="#f2a20f" deepColor="#6008ec">
            <div class="ballCenter">
              <span>{{ roomTemperature?roomTemperature:0 }}℃</span>
            </div>
          </WaterBall>
          <div class="name">室温</div>
        </div>
      </div>
    </div>

    <div class="center_box">
      <div class="title">
        <div class="left">
          <div class="tag"></div>住户基本数据
        </div>
      </div>

      <div class="center_container">
        <div class="content">
          <div class="left">
            <div>小区</div>
            <div>楼栋</div>
            <div>单元</div>
            <div>楼层</div>
            <div>门牌号</div>
          </div>
          <div class="right">
            <div>{{ info2.plotName }}</div>
            <div>{{ info2.buildName }}</div>
            <div>{{ info2.unitName }}</div>
            <div>{{ info2.floor }}</div>
            <div @click="goDataList()" style="cursor: pointer;color: rgb(64, 158, 255);">{{
              info2.houseNumber }}</div>
          </div>
        </div>
        <div class="content">
          <div class="left">
            <div>住户方位</div>
            <div>管道位置</div>
            <div>采暖面积</div>
            <div>房间热卡号</div>
            <div>住户姓名</div>
          </div>
          <div class="right">
            <div>{{ info2.orientation }}</div>
            <div>{{ info2.pipePosition }}</div>
            <div>{{ info2.heatArea }}</div>
            <div>{{ info2.hotCardNumber }}</div>
            <div>{{ info2.userName }}</div>
          </div>
        </div>
        <div class="content">
          <div class="left">
            <div>固定电话</div>
            <div>移动电话</div>
            <div>供热类型</div>
            <div>住户分类</div>
            <div>邮箱地址</div>
          </div>
          <div class="right">
            <div>{{ info2.landPhone }}</div>
            <div>{{ info2.mobilePhone }}</div>
            <div>{{ info2.heatingType }}</div>
            <div>{{ info2.type }}</div>
            <div>{{ info2.email }}</div>
          </div>
        </div>
        <div class="content">
          <div class="left">
            <div>当前模型</div>
            <div>创建人</div>
            <div>创建时间</div>
            <div>调控状态</div>
            <div></div>
          </div>
          <div class="right">
            <div>{{ info2.modelName }}</div>
            <div>{{ info2.createName }}</div>
            <div>{{ info2.createTime }}</div>
            <div>{{ regulationName }}</div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <div class="title" style="margin-bottom: 10px;">
      <div class="left">
        <div class="tag"></div>住户设备信息
      </div>
    </div>
    <el-table v-loading="loading" :data="equipmentMessageList" stripe>
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="序号" align="center" type="index"></el-table-column>
      <el-table-column show-overflow-tooltip label="设备名称" align="center" prop="equipmentName" />
      <el-table-column show-overflow-tooltip label="设备种类" align="center" prop="equipmentTypeName"></el-table-column>
      <el-table-column show-overflow-tooltip label="设备编号" align="center" prop="equipmentCode"></el-table-column>
      <el-table-column show-overflow-tooltip label="设备地址" align="center" prop="address" />
      <el-table-column show-overflow-tooltip label="所属设备分组" align="center" prop="groupName"></el-table-column>
    </el-table>

    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" /> -->

    <!--调控弹窗 -->
    <el-dialog title="调控" v-loading="tk_loading" element-loading-background="rgba(0, 0, 0, 0.1)"
      :visible.sync="dialogTiaoKong" width="70%" append-to-body>
      <div class="dialog-warp">
        <el-form :model="regulationData" :rules="rules" ref="chaobiaoForm" :inline="true" label-position="left">
          <el-form-item prop="regulationMethod" label="调控方法">
            <el-select v-model="regulationData.regulationMethod" placeholder="请选择调控方法" clearable>
              <el-option v-for="dict in tiaokongData" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item v-if="regulationData.regulationMethod == 1" prop="buildingValveOpen" label="楼栋阀门默认值">
            <el-input v-model="regulationData.buildingValveOpen" placeholder="楼栋阀门默认值(0-100)"></el-input>
          </el-form-item>
          <el-form-item v-if="regulationData.regulationMethod == 1" prop="unitValveOpen" label="单元阀门默认值">
            <el-input v-model="regulationData.unitValveOpen" placeholder="单元阀门默认值(0-100)"></el-input>
          </el-form-item> -->
          <el-form-item v-if="regulationData.regulationMethod == 1" prop="householdValveOpen" label="住户阀门默认值">
            <el-input v-model="regulationData.householdValveOpen" placeholder="住户阀门默认值(0-100)"></el-input>
          </el-form-item>
          <!-- <el-form-item v-if="regulationData.regulationMethod == 1" label="阀门调整步进值" prop="stepValue">
            <el-input v-model="regulationData.stepValue" placeholder="阀门调整步进值"></el-input>
          </el-form-item> -->
          <el-form-item label="调控策略" prop="controlStrategy" v-if="regulationData.regulationMethod==2">
            <el-select v-model="regulationData.controlStrategy" placeholder="请选择调控策略" clearable>
              <el-option v-for="dict in tiaokongCelue" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <div v-if="regulationData.controlStrategy == 1">
            <el-form-item prop="returnWaterTemperature" label="回水温度目标值">
              <el-input v-model="regulationData.returnWaterTemperature" placeholder="回水温度目标值"></el-input>
            </el-form-item>
            <el-form-item label="回水温度波动值" prop="returnWaterTemperatureFluctuating">
              <el-input type="number" v-model="regulationData.returnWaterTemperatureFluctuating"
                placeholder="回水温度波动值"></el-input>
            </el-form-item>
            <el-form-item label="回水温度波动范围">
              <el-input :value="returnWaterTemperatureRange" disabled type="text" placeholder="回水温度波动范围"></el-input>
            </el-form-item>
            <el-form-item label="回水温度异常最小值" prop="returnWaterMinValue">
              <el-input v-model="regulationData.returnWaterMinValue" type="number" placeholder="回水温度异常最小值"></el-input>
            </el-form-item>
            <el-form-item label="回水温度异常最大值" prop="returnWaterMaxValue">
              <el-input v-model="regulationData.returnWaterMaxValue" type="number" placeholder="回水温度异常最大值"></el-input>
            </el-form-item>
          </div>

          <div v-else-if="regulationData.controlStrategy == 2">
            <el-form-item prop="targetRoomTemperature" label="室内温度目标值">
              <el-input v-model="regulationData.targetRoomTemperature" placeholder="室内温度目标值"></el-input>
            </el-form-item>
            <el-form-item label="室内温度波动值" prop="targetRoomTemperatureFluctuating">
              <el-input type="number" v-model="regulationData.targetRoomTemperatureFluctuating"
                placeholder="室内温度波动值"></el-input>
            </el-form-item>
            <el-form-item label="室内温度波动范围">
              <el-input :value="targetRoomRange" disabled type="text" placeholder="室内温度波动范围"></el-input>
            </el-form-item>
            <el-form-item label="室内温度异常最小值" prop="targetRoomMinValueP">
              <el-input v-model="regulationData.targetRoomMinValueP" type="number" placeholder="室内温度异常最小值"></el-input>
            </el-form-item>
            <el-form-item label="室内温度异常最大值" prop="targetRoomMaxValue">
              <el-input v-model="regulationData.targetRoomMaxValue" type="number" placeholder="室内温度异常最大值"></el-input>
            </el-form-item>
          </div>

          <div v-else-if="regulationData.controlStrategy == 3">
            <el-form-item label="供回水平均温度目标值" prop="farReturnTemperature">
              <el-input type="number" v-model="regulationData.farReturnTemperature" placeholder="供回水平均温度目标值"></el-input>
            </el-form-item>
            <el-form-item label="供回水平均温度波动值" prop="farReturnTemperatureFluctuating">
              <el-input type="number" v-model="regulationData.farReturnTemperatureFluctuating"
                placeholder="供回水平均温度波动值"></el-input>
            </el-form-item>
            <el-form-item label="供回水平均温度波动范围" prop="farReturnTemperatureFluctuating">
              <el-input disabled :value="farReturnTemperatureRange" type="text" placeholder="供回水平均温度波动范围"></el-input>
            </el-form-item>
            <el-form-item label="供回水平均温度异常最小值" prop="farReturnMinValue">
              <el-input v-model="regulationData.farReturnMinValue" type="number" placeholder="供回水平均温度异常最小值"></el-input>
            </el-form-item>
            <el-form-item label="供回水平均温度异常最大值" prop="farReturnMaxValue">
              <el-input v-model="regulationData.farReturnMaxValue" type="number" placeholder="供回水平均温度异常最大值"></el-input>
            </el-form-item>
          </div>

          <div v-else-if="regulationData.controlStrategy == 4">
            <el-form-item prop="velocityFlow" label="流量目标值">
              <el-input v-model="regulationData.velocityFlow" placeholder="流量目标值"></el-input>
            </el-form-item>
            <el-form-item label="流量目标波动值" prop="velocityFlowFluctuating">
              <el-input type="number" v-model="regulationData.velocityFlowFluctuating" placeholder="流量目标波动值"></el-input>
            </el-form-item>
            <el-form-item label="流量目标波动范围">
              <el-input disabled :value="velocityFlowRange" type="text" placeholder="流量目标波动范围"></el-input>
            </el-form-item>
            <el-form-item label="流量目标异常最小值" prop="velocityFlowMinValue">
              <el-input v-model="regulationData.velocityFlowMinValue" type="number" placeholder="流量目标异常最小值"></el-input>
            </el-form-item>
            <el-form-item label="流量目标异常最大值" prop="velocityFlowMaxValue">
              <el-input v-model="regulationData.velocityFlowMaxValue" type="number" placeholder="流量目标异常最大值"></el-input>
            </el-form-item>
          </div>

          <div v-else-if="regulationData.controlStrategy == 5">
            <el-form-item prop="heat" label="热量目标值">
              <el-input v-model="regulationData.heat" placeholder="热量目标值"></el-input>
            </el-form-item>
            <el-form-item label="热量波动值" prop="heatFluctuating">
              <el-input type="number" v-model="regulationData.heatFluctuating" placeholder="热量波动值"></el-input>
            </el-form-item>
            <el-form-item label="热量目标波动范围">
              <el-input :value="heatRange" disabled type="text" placeholder="热量目标波动范围"></el-input>
            </el-form-item>
            <el-form-item label="热量目标异常最小值" prop="heatMinValue">
              <el-input v-model="regulationData.heatMinValue" type="number" placeholder="热量目标异常最小值"></el-input>
            </el-form-item>
            <el-form-item label="热量目标异常最大值" prop="heatMaxValue">
              <el-input v-model="regulationData.heatMaxValue" type="number" placeholder="热量目标异常最大值"></el-input>
            </el-form-item>
          </div>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellation">取 消</el-button>
        <el-button type="primary" @click="handelClickOk">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 累计流量图表 -->
    <el-dialog title="累计流量" :visible.sync="echartDialog1" width="50%">
      <div class="formDate">
        <!-- <el-date-picker v-model="echartDate1" type="datetimerange" align="center" start-placeholder="开始日期"
          end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker> -->
        <el-select v-model="searchType1" placeholder="请选择" clearable style="width: 200px">
          <el-option v-for="dict in searchTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
        <el-button @click="getLineChart(1)" type="primary">查 看</el-button>
      </div>
      <div class="echartWrap">
        <div id="my-echart" class="echarts"></div>
      </div>
      <div style="display: flex;justify-content: flex-end;">
        <el-button @click="echartDialog1 = false" type="primary">返 回</el-button>
      </div>
    </el-dialog>

    <!-- 累计热量图表 -->
    <el-dialog title="累计热量" :visible.sync="echartDialog2" width="50%">
      <div class="formDate">
        <!-- <el-date-picker v-model="echartDate2" type="datetimerange" align="center" start-placeholder="开始日期"
          end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker> -->
        <el-select v-model="searchType2" placeholder="请选择" clearable style="width: 200px">
          <el-option v-for="dict in searchTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
        <el-button @click="getLineChart(2)" type="primary">查 看</el-button>
      </div>
      <div class="echartWrap">
        <div id="my-echart2" class="echarts"></div>
      </div>
      <div style="display: flex;justify-content: flex-end;">
        <el-button @click="echartDialog2 = false" type="primary">返 回</el-button>
      </div>
    </el-dialog>

    <el-dialog title="更新" :visible.sync="dialogGengXin" width="400px">
      <span style="color: #fff;">是否对当前数据进行更新？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogGengXin = false">取 消</el-button>
        <el-button type="primary" @click="GengXin">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import WaterBall from '@/components/WaterBall/index'
import { getHouseholdHeatData, getHouseholdInf, getHouseholdEquipment, updateTemperature, LineChart } from '@/api/balancedView/balancedView'
import { addOrUpdateControlSet } from "@/api/monitoring/balance"
import { getDataSetInfo } from "@/api/monitoring/balance"
export default {
  components: {
    WaterBall,
  },
  data() {
    return {
      tiaokongCelue: [
        {
          label: "回水温度",
          value: '1',
          ruleNames: [
            "returnWaterTemperature",
            "returnWaterTemperatureFluctuating",
            "returnWaterMinValue",
            "returnWaterMaxValue",
          ],
        },
        {
          label: "室内温度",
          value: '2',
          ruleNames: [
            "targetRoomTemperature",
            "targetRoomTemperatureFluctuating",
            "targetRoomMinValueP",
            "targetRoomMaxValue",
          ],
        },
        {
          label: "供回水平均温度",
          value: '3',
          ruleNames: [
            "farReturnTemperature",
            "farReturnTemperatureFluctuating",
            "farReturnMinValue",
            "farReturnMaxValue",
          ],
        },
        {
          label: "流量",
          value: '4',
          ruleNames: [
            "velocityFlow",
            "velocityFlowFluctuating",
            "velocityFlowMinValue",
            "velocityFlowMaxValue",
          ],
        },
        {
          label: "热量",
          value: '5',
          ruleNames: [
            "heat",
            "heatFluctuating",
            "heatMinValue",
            "heatMaxValue",
          ],
        },
      ],
      tiaokongData: [
        { label: '未知', value: '0' },
        { label: '手动调控', value: '1' },
        { label: '自动调控', value: '2' },
      ],
      roomTemperature: '',
      dialogGengXin: false,
      dialogTiaoKong: false,
      equipmentMessageList: [],
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dataParams: {
        plotId: null,
        buildId: null,
        householdId: null,
      },
      option: {
        series: [{
          type: 'liquidFill',
          name: 'Liquid Fill',
          radius: '70%',
          itemStyle: {
            opacity: 0.55,
          },
          data: [{
            name: 'score',
            direction: 'right',
            value: 0.32,
            itemStyle: {
              // opacity: 0.55,
              normal: {
                color: '#02CDF6',
              }
            },
          },],
          backgroundStyle: {   // 设置水球图内部背景色
            // borderColor: '#4348EC',
            // borderWidth: 10,
            color: "transparent",//水球图内部背景色
          },
          itemStyle: {
            opacity: 0.55,
            // shadowBlur: 50,
            // shadowColor: 'rgba(0, 0, 0, 0.4)',
          },
          label: {   // 设置百分比展示
            color: '#02CDF6',
            normal: {
              textStyle: {
                fontSize: 20,
              },
              formatter: function (param) {
                return param.value * 100 + '°';
              }
            }
          },
        }],
      },
      info1: {
        currentHeatOrCold: null,
        currentTime: null,
        heatOrCold: null,
        returnWaterTemperature: null,
        status: null,
        thermalPower: null,
        totalFlow: null,
        totalWorkTime: null,
        velocityFlow: null,
        waterSupplyTemperature: null,
        householdData: {
          velocityFlowMaxValue: null,
          heatMaxValue: null,
          returnwaterMaxValue: null,
          farReturnTemperature: null,
          targetRoomMaxValue: null,
        },
      },
      info2: {
        buildId: 1,
        buildName: null,
        createBy: null,
        createName: null,
        createTime: null,
        email: "",
        floor: null,
        heatArea: null,
        heatingOrNot: null,
        heatingType: null,
        hotCardNumber: "",
        houseNumber: "",
        id: 1,
        landPhone: "",
        lockStatus: null,
        mobilePhone: "",
        modelIds: "0",
        modelName: null,
        orientation: "",
        pipePosition: "",
        plotId: null,
        plotName: null,
        remark: null,
        type: "",
        unit: null,
        unitName: null,
        userName: "",
        regulationMethod: null,
      },
      tk_loading: false,
      // 调控数据
      regulationData: {
        id: null,
        // 类型 0:小区 1：楼栋 2：单元 3：住户
        type: 3,
        // 优先级（1：楼栋 2：单元）
        priority: null,
        // 热量目标
        heat: null,
        heatFluctuating: null,
        heatMinValue: null,
        heatMaxValue: null,
        // 室内温度目标值
        targetRoomTemperature: null,
        targetRoomTemperatureFluctuating: null,
        targetRoomMinValueP: null,
        targetRoomMaxValue: null,
        // 回水温度目标
        returnWaterTemperature: null,
        returnWaterTemperatureFluctuating: null,
        returnWaterMinValue: null,
        returnWaterMaxValue: null,
        // 小区id
        plotId: null,
        // 楼栋id
        buildId: null,
        // 单元id
        unitId: null,
        // 调控方法（1：手动调控 2：自动调控）
        regulationMethod: null,
        // 调控策略
        controlStrategy: null,
        // 楼栋阀门默认开度
        buildingValveOpen: null,
        // 单元阀门默认开度
        unitValveOpen: null,
        // 住户阀门默认开度
        householdValveOpen: null,
        // 阀门调整步进值
        stepValue: null,
        // 供回水平均温度
        farReturnTemperature: null,
        farReturnTemperatureFluctuating: null,
        farReturnMinValue: null,
        farReturnMaxValue: null,
        // 流量目标值
        velocityFlow: null,
        velocityFlowFluctuating: null,
        velocityFlowMinValue: null,
        velocityFlowMaxValue: null,
      },
      rules: {
        regulationMethod: [
          { required: true, message: "请选择调控方法", trigger: "blur" },
        ],
        controlStrategy: [
          { required: true, message: "请选择调控策略", trigger: "blur" },
        ],
        buildingValveOpen: [
          { required: true, message: "请选择楼栋阀门默认值", trigger: "blur" },
        ],
        stepValue: [
          { required: true, message: "请输入阀门调整步进值", trigger: "blur" },
        ],
        unitValveOpen: [
          { required: true, message: "请选择单元阀门默认值", trigger: "blur" },
        ],
        householdValveOpen: [
          { required: true, message: "请选择住户阀门默认值", trigger: "blur" },
        ],
        returnWaterTemperature: [
          { required: false, message: "请输入回水温度目标值", trigger: "blur" },
        ],
        returnWaterTemperatureFluctuating: [
          {
            required: false,
            message: "请输入回水温度目标波动值",
            trigger: "blur",
          },
        ],
        returnWaterMinValue: [
          {
            required: false,
            message: "请输入回水温度异常最小值",
            trigger: "blur",
          },
        ],
        returnWaterMaxValue: [
          {
            required: false,
            message: "请输入回水温度异常最大值",
            trigger: "blur",
          },
        ],
        farReturnTemperature: [
          {
            required: false,
            message: "请输入供回水平均温度目标值",
            trigger: "blur",
          },
        ],
        farReturnTemperatureFluctuating: [
          {
            required: false,
            message: "请输入供回水平均温度波动值",
            trigger: "blur",
          },
        ],
        farReturnMinValue: [
          {
            required: false,
            message: "请输入供回水平均温度异常最小值",
            trigger: "blur",
          },
        ],
        farReturnMaxValue: [
          {
            required: false,
            message: "请输入供回水平均温度异常最大值",
            trigger: "blur",
          },
        ],
        targetRoomTemperature: [
          { required: false, message: "请输入室内温度目标值", trigger: "blur" },
        ],
        targetRoomTemperatureFluctuating: [
          {
            required: false,
            message: "请输入室内温度目标波动值",
            trigger: "blur",
          },
        ],
        targetRoomMinValueP: [
          {
            required: false,
            message: "请输入室内温度异常最小值",
            trigger: "blur",
          },
        ],
        targetRoomMaxValue: [
          {
            required: false,
            message: "请输入室内温度异常最大值",
            trigger: "blur",
          },
        ],
        velocityFlow: [
          { required: false, message: "请输入流量目标值", trigger: "blur" },
        ],
        velocityFlowFluctuating: [
          { required: false, message: "请输入流量目标波动值", trigger: "blur" },
        ],
        velocityFlowMaxValue: [
          {
            required: false,
            message: "请输入流量目标异常最大值",
            trigger: "blur",
          },
        ],
        velocityFlowMinValue: [
          {
            required: false,
            message: "请输入流量目标异常最小值",
            trigger: "blur",
          },
        ],
        heat: [
          { required: false, message: "请输入热量目标值", trigger: "blur" },
        ],
        heatFluctuating: [
          { required: false, message: "请输入热量目标波动值", trigger: "blur" },
        ],
        heatMinValue: [
          {
            required: false,
            message: "请输入热量目标异常最小值",
            trigger: "blur",
          },
        ],
        heatMaxValue: [
          {
            required: false,
            message: "请输入热量目标异常最大值",
            trigger: "blur",
          },
        ],
      },
      option: {
        // legend: {
        //   textStyle: {
        //     color: "#fff",
        //   }
        // },
        color: ['#00fcd4'],
        textStyle: {
          color: "#fff",
        },
        xAxis: {
          type: 'category',
          data: ['2023-8-15', '023-8-15', '023-8-15', '023-8-15', '023-8-15', '023-8-15', '023-8-15'],
          axisLine: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "累计流量",
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            stack: "Total",
            label: {
              show: true,
              position: "top",
              formatter: function (val) {
                return val.value
              },
              textStyle: {
                color: "#fff",
              },
            },
          }
        ]
      },
      echartDialog1: false,
      echartDate1: [],
      searchType1: 2,
      option2: {
        // legend: {
        //   textStyle: {
        //     color: "#fff",
        //   }
        // },
        color: ['rgb(255, 65, 63)'],
        textStyle: {
          color: "#fff",
        },
        xAxis: {
          type: 'category',
          data: ['2023-8-15', '023-8-15', '023-8-15', '023-8-15', '023-8-15', '023-8-15', '023-8-15'],
          axisLine: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "累计热量",
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            stack: "Total",
            emphasis: {
              focus: "series",
            },
            label: {
              show: true,
              position: "top",
              formatter: function (val) {
                return val.value
              },
              textStyle: {
                color: "#fff",
              },
            },
          }
        ]
      },
      echartDialog2: false,
      echartDate2: [],
      searchType2: 2,
      searchTypeList: [
        {
          label: '今日',
          value: 1,
        },
        {
          label: '近7日',
          value: 2,
        },
        {
          label: '近半年 ',
          value: 3,
        },
        {
          label: '近一年 ',
          value: 4,
        },
      ]
    }
  },
  watch: {
    "regulationData.controlStrategy": {
      handler(n, o) {
        console.log(n)
        let val1 = this.tiaokongCelue.find((item) => item.value == n);
        let val2 = this.tiaokongCelue.find((item) => item.value == o);
        for (const key in this.rules) {
          if (val1 && val1.ruleNames.includes(key)) {
            this.rules[key].forEach((element) => {
              element.required = true;
            });
          } else if (val2 && val2.ruleNames.includes(key)) {
            this.rules[key].forEach((element) => {
              element.required = false;
            });
          }
        }
      },
      deep: true,
    },
  },
  computed: {
    heatRange() {
      let number = Number(this.regulationData.heat);
      let fluctua = Number(this.regulationData.heatFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    targetRoomRange() {
      let number = Number(this.regulationData.targetRoomTemperature);
      let fluctua = Number(this.regulationData.targetRoomTemperatureFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    velocityFlowRange() {
      let number = Number(this.regulationData.velocityFlow);
      let fluctua = Number(this.regulationData.velocityFlowFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    farReturnTemperatureRange() {
      let number = Number(this.regulationData.farReturnTemperature);
      let fluctua = Number(this.regulationData.farReturnTemperatureFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    returnWaterTemperatureRange() {
      let number = Number(this.regulationData.returnWaterTemperature);
      let fluctua = Number(this.regulationData.returnWaterTemperatureFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    regulationName() {
      let obj = this.tiaokongData.find(item => item.value == this.info2.regulationMethod)
      if (obj) {
        return obj.label
      } else {
        return ''
      }
    },
    //瞬时流量
    ratio1() {
      // if(this.info1.velocityFlow && this.info1.householdData){
      //     return this.info1.velocityFlow / this.info1.householdData.velocityFlowMaxValue
      // }else{
      //   return 0
      // }
      if(this.info1.householdData){
          return this.info1.velocityFlow / 100
      }else{
        return 0
      }
    },
    //瞬时热量
    ratio2() {
      // if(this.info1.currentHeatOrCold && this.info1.householdData){
      //   return this.info1.currentHeatOrCold / this.info1.householdData.heatMaxValue
      // }else{
      //   return 0
      // }
      if(this.info1.currentHeatOrCold){
        return this.info1.currentHeatOrCold / 100
      }else{
        return 0
      }
    },
    //供水温度
    ratio3() {
      // if(this.info1.waterSupplyTemperature && this.info1.householdData){
      //   return this.info1.waterSupplyTemperature / this.info1.householdData.farReturnTemperature
      // }else{
      //   return 0
      // }
      if(this.info1.waterSupplyTemperature){
        return this.info1.waterSupplyTemperature / 100
      }else{
        return 0
      }
    },
    //回水温度
    ratio4() {
      // if(this.info1.returnWaterTemperature && this.info1.householdData){
      //   return this.info1.returnWaterTemperature / this.info1.householdData.returnWaterMaxValue
      // }else{
      //   return 0
      // }
      if(this.info1.returnWaterTemperature){
        return this.info1.returnWaterTemperature / 100
      }else{
        return 0
      }
    },
    ratio5() {
      // if(this.roomTemperature && this.info1.householdData){
      //   return this.roomTemperature / this.info1.householdData.targetRoomMaxValue
      // }else{
      //   return 0
      // }
      if(this.roomTemperature){
        return this.roomTemperature / 100
      }else{
        return 0
      }
    },
  },
  created() {
    // this.getList()
    let { plotId, buildId, householdId } = this.$route.query
    this.regulationData.plotId = plotId
    this.regulationData.buildId = buildId
    this.regulationData.householdId = householdId
    this.dataParams.plotId = plotId
    this.dataParams.buildId = buildId
    this.dataParams.householdId = householdId
    this.getHouseholdData()
    this.getTemperature()
    let { start, end } = this.getWeekDate()
    this.echartDate1 = [start, end]
  },
  mounted() {

  },
  methods: {
    /** 查询设备列表 */
    getList() {
      this.loading = true;
      getHouseholdEquipment(this.queryParams).then(response => {
        this.equipmentMessageList = response.rows;
        this.total = response.total;
        this.loading = false;
      }, err => {
        this.loading = false;
      });
    },
    getHouseholdData() {
      this.loading = true;
      Promise.all([getHouseholdHeatData(this.dataParams), getHouseholdInf(this.dataParams), getHouseholdEquipment(this.dataParams)])
        .then(res => {
          console.log("全部数据",res);
          this.loading = false
          this.equipmentMessageList = res[2].data
          if (res[0].data) this.info1 = res[0].data
          if (res[1].data) this.info2 = res[1].data
          console.log("this.info1",this.info1);
        }).catch(err => {
          this.loading = false
        })
    },
    GengXin() {
      getHouseholdHeatData(this.dataParams).then(res => {
        this.info1 = res.data
        this.$message({
          message: '更新成功！！！',
          type: 'success'
        });
      })
    },
    // 取消调控
    cancellation() {
      this.dialogTiaoKong = false
      this.resetForm('chaobiaoForm')
    },
    // 确定
    handelClickOk() {
      this.$refs['chaobiaoForm'].validate((valid) => {
        if (valid) {
          this.regulationData.plotId = this.dataParams.plotId
          this.regulationData.buildId = this.dataParams.buildId
          this.regulationData.householdId = this.dataParams.householdId
          this.regulationData.type = '3'
          this.tk_loading = true
          addOrUpdateControlSet(this.regulationData).then(res => {
            this.tk_loading = false
            this.$message.success('调控成功')
            this.dialogTiaoKong = false
            this.resetForm('chaobiaoForm')
          }, err => {
            this.tk_loading = false
          })
        }
      });
    },
    // 室温数据
    getTemperature(useMsg = false) {
      updateTemperature(this.dataParams).then(res => {
        if (useMsg) {
          this.$message.success('室温更新成功')
        }
        this.roomTemperature = res.data.temperature
      }).catch(err => {
        if (useMsg) {
          // this.$message.error('室温更新失败')
        }
      })
    },
    goDataList() {
      let { plotId, buildId, unit, houseNumber } = this.info2
      this.$router.push({
        path: '/data/list',
        query: { type: 2, plotId, buildId, unitId: unit, houseNumber }
      })
    },
    // 获取最近一周日期
    getWeekDate() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return {
        start, end
      }
    },
    getLineChart(dataType) {
      let objData = {
        householdId: this.dataParams.householdId,
        dataType,
      }
      if (dataType == 1) {
        objData.searchType = this.searchType1
      } else {
        objData.searchType = this.searchType2
      }
      LineChart(objData).then(res => {
        let x = res.data.map(item => item.time)
        let y = res.data.map(item => item.value)
        if (objData.dataType == 1) {
          this.option.xAxis.data = x
          this.option.series[0].data = y
          this.$nextTick(() => {
            const myEchart = echarts.init(document.getElementById('my-echart'));
            myEchart.setOption(this.option);
          })
        } else {
          this.option2.xAxis.data = x
          this.option2.series[0].data = y
          this.$nextTick(() => {
            const myEchart = echarts.init(document.getElementById('my-echart2'));
            myEchart.setOption(this.option2);
          })
        }
      })
    },
    totalWorkTimeEchartShow() {
      this.echartDialog1 = true
      this.getLineChart(1)
    },
    totalFlowEchartShow() {
      this.echartDialog2 = true
      this.getLineChart(2)
    },
    useTiaoKong() {
      let objData = {
        ...this.dataParams,
        type: '3'
      }
      getDataSetInfo(objData).then(res => {
        for (const key in this.regulationData) {
          this.regulationData[key] = res[key]
        }
        this.dialogTiaoKong = true
      }, err => {
        this.$message.error('获取住户调控数据失败')
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.top_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.center_box {
  margin-bottom: 10px;
  margin-top: 20px;
  width: 100%;
  height: 381px;
  background: #444F64;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;

  .title {
    width: 100%;

    .left {
      .tag {
        width: 5px;
        height: 25px;
        background: linear-gradient(180deg, #00BBF6 0%, #0075D1 100%);
        margin-right: 10px;
      }

      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Regular,
      PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

  .center_container {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .content {
      // width: 380px;
      flex: 1;
      height: 280px;
      // background-color: red;
      display: flex;

      .left {
        // width: 140px;
        flex: 1;
        height: 100%;
        background-color: #374056;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 22px;
        border-radius: 5px;

        div {
          line-height: 56px;
          text-align: center;
          // background-color: red;
        }
      }

      .right {
        // width: 240px;
        flex: 2;
        height: 100%;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #CCCCCC;

        div {
          line-height: 56px;
          text-align: center;
          min-height: 56px;
          // background-color: red;
        }
      }
    }
  }
}

.box {
  width: 910px;
  height: 266px;
  background: #444F64;
  border-radius: 5px;
  padding: 20px 15px;
  box-sizing: border-box;

  .title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .left {
      .tag {
        width: 5px;
        height: 25px;
        background: linear-gradient(180deg, #00BBF6 0%, #0075D1 100%);
        margin-right: 10px;
      }

      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Regular,
      PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }

    .right {
      width: 101px;
      height: 38px;
      background: linear-gradient(90deg, #00BBF6 0%, #0075D1 100%);
      border-radius: 19px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      cursor: pointer;

      img {
        width: 28px;
        height: 28px;
      }
    }
  }

  .list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;

    .qiu {
      width: 130px;
      position: relative;
      text-align: center;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;

      .name {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 18px;
        margin-top: 10px;
      }
    }
  }
}

// .qiu::before {
//   content: attr(data-attr);
//   position: absolute;
//   width: 100%;
//   height: 20px;
//   color: #fff;
//   top: 80px;
//   left: 0;
//   left: 50%;
//   transform: translateX(-50%);
// }

.qiu_img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.box2 {
  width: 317px;
  height: 266px;
  background: #444F64;
  border-radius: 5px;
  padding-top: 20px;
  box-sizing: border-box;

  .qiu {
    width: 130px;
    position: relative;
    text-align: center;
    margin: 0 auto;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;

    .name {
      width: 100%;
      text-align: center;
      color: #fff;
      font-size: 18px;
      margin-top: 10px;
    }

    span {
      position: absolute;
      z-index: 999;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .btn_box {
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box;
    height: 38px;
    margin-bottom: 20px;

    .btn_right {
      height: 38px;
      width: 101px;
      background: linear-gradient(90deg, #00BBF6 0%, #0075D1 100%);
      border-radius: 19px;
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      cursor: pointer;


      img {
        width: 28px;
        height: 28px;
      }
    }
  }
}

.title {
  width: 100%;

  .left {
    .tag {
      width: 5px;
      height: 25px;
      background: linear-gradient(180deg, #00BBF6 0%, #0075D1 100%);
      margin-right: 10px;
    }

    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: PingFangSC-Regular,
    PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }
}

.formDate {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.echartWrap {
  width: 100%;

  .echarts {
    width: 100%;
    height: 400px;
  }
}

::v-deep .el-dialog {
  display: flex;
  display: -ms-flex;
  /* 兼容IE */
  flex-direction: column;
  -ms-flex-direction: column;
  /* 兼容IE */
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
  max-height: 100%;
  flex: 1;
  -ms-flex: 1 1 auto;
  /* 兼容IE */
  overflow-y: auto;
  overflow-x: hidden;
}

::v-deep .el-form {
  background-color: unset !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.ballCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

::v-deep .dialog-warp {
  max-height: 50vh;
  overflow-y: scroll;
  padding-left: 50px;
}

::v-deep .el-dialog .el-form .el-form-item .el-form-item__content {
  margin-left: 10px !important;
  margin-right: 30px;
}

::v-deep .el-dialog .el-form .el-form-item .el-form-item__label {
  width: 120px !important;
}
</style>
